<template>
  <div class="container">
    <div class="title">
      <div class="title-name">
        <span>{{ title }}</span>
      </div>
      <div class="add2">
        <laker-status-indicator type="success" :pulse="true"></laker-status-indicator>&nbsp;正常&nbsp;
        <laker-status-indicator type="yellow" :pulse="true"></laker-status-indicator>&nbsp;预警&nbsp;
        <laker-status-indicator type="red" :pulse="true"></laker-status-indicator>&nbsp;报警&nbsp;
      </div>
    </div>

    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import lakerStatusIndicator from '../lakerMini/lakerStatusIndicator.vue'
export default {
  components: { lakerStatusIndicator },
  name: 'ItemBorder',
  props: {
    title: { type: String, default: '标题' },
    more: { type: Boolean, default: false }
  },
  methods: {
    itemMore() {
      this.$emit('itemMore')
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(8, 67, 137, 0.7);
  background: rgb(31, 53, 249, 0.15);
  margin-top: 5px;
  .title {
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    border-bottom: 1px solid rgba(8, 67, 137, 0.7);
  }
  .title-name {
    display: inline-block;
    background: url('@/assets/images/childtitle.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-content: center;
    span {
      margin: 2px 20px;
      line-height: 28px;
      text-align: left;
      font-size: 15px;
      font-weight: bold;
      background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#cfe3ff), to(#74b3fc));
      background-clip: text;
      -webkit-text-fill-color: transparent; /*color:#9ECBFF;*/
    }
  }
  .add2 {
    z-index: 10;
    height: 30px;
    line-height: 30px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }
  .add {
    z-index: 10;
    height: 20px;
    line-height: 20px;
    border: 2px solid #1d53c0;
    padding: 1px 5px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }

  .content {
    height: calc(100% - 30px);
    padding: 0 2px 5px 2px;
  }
}
</style>
